import React,{ Component } from 'react';
import './search.scss';
import '../../index/index.scss';
import { 
	Link
} from 'react-router-dom';
import { searchCustomInit, searchCustomListBySign } from 'api/client.js';
export default class Search extends Component{
	constructor (props) {
		super(props)
		this.state={
			searchLabel: [],
			searchCline: [],
			sign_name: '',
			hiden: '',
			show: 'hiden'
		}
	}
	goBack () { //返回上一级
		this.props.history.goBack()
	}
	pushHistory () { //跳转
		this.props.history.push(`${window.baseUrl}/client/label`)
	}
	enterInto () { //回车进行搜索
    this._searchCustomListBySign(this.state.sign_name)
  }
  clear () {
  	this.setState({
  		sign_name: ''
  	})
  }
	_searchCustomListBySign (sign_name) { //搜索标签
		searchCustomListBySign({
			sign_name: sign_name,
			employee_id: 10000
		}).then(res => {
			this.setState({
				searchCline: res.data,
				hiden: 'hiden',
				show: ''
			})
		})
	}
	handChange (e) {
		this.setState({
			sign_name:　e.target.value
		})
	}
	componentDidMount(){
		document.title = '客户标签';
		searchCustomInit().then(res => { //初始化标签
			if(res.code === 1){
				this.setState({
					searchLabel: res.data
				})
			}
		})
	}
	render () {
		return(
			<div className="search">
				{/*<div className="title">
					<div onClick={this.goBack.bind(this)}><i className="glyphicon glyphicon-left"></i></div>
					<div>客户标签</div>
					<div></div>
				</div>*/}
				<div className="search_input">
					<form onSubmit={()=>{this.enterInto();return false;}} action="#">
						<input type="search" placeholder="搜索标签" value={this.state.sign_name} onChange={this.handChange.bind(this)} /><i className="glyphicon glyphicon-search search_icon"></i>
						<input type="text" id="" name="" style={{display: "none"}}/>
					</form>
					<span className="search_qx" onClick={this.clear.bind(this)}>取消</span>
				</div>
				<div className={`search_content ${this.state.hiden}`}>
					<p>搜索指定标签</p>
					<ul className="search_text">
					{
						this.state.searchLabel.map((item,index) => {
							return(
								<li key={index} onClick={this._searchCustomListBySign.bind(this,item.sign_name)}>{item.sign_name}</li>
							)
						})
					}
					</ul>
					<div className="search_button" onClick={this.pushHistory.bind(this)}>查看全部标签</div>
				</div>
				<div className={`search_results ${this.state.show}`}>
				{
					this.state.searchCline.length !== 0 ?
					<div className="search_results_info">
						<p className="search_results_title">标签成员({this.state.searchCline.length})</p>
						<ul className="labelTool_list">
						{
							this.state.searchCline.map((item,index) => {
								return(
									<Link to={
										{
											pathname:`${window.baseUrl}/clinetDetails`,
											state: {
												account_user_id: item.account_user_id
											}
										}
									} key={index}>
									<li>
										<img src={item.employee_img} className="labelTool_img" alt="lalal"/><br/>
										<span>{item.sign_name}</span>
									</li>
									</Link>
								)
							})
						}
						</ul>
					</div>
					: <p className="search_error">抱歉，没有搜索到该标签</p>
				}
				</div>
			</div>
		)
	}
}